<template>
    <div>
        <van-tabs type="link" background="#dfdfdf">
            <van-tab title="消息"></van-tab>
            <van-icon name="../../static/icon/-.png" size="18"/>
            <van-icon name="add" size="18"/>
        </van-tabs>
        <ul class="listul">
            <li v-for="(item,i) in list" :key="i" @click="tap(i)">
                <div class="center" >
                    <img :src="item.cimg" >
                    <div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend">
                        <h4>{{item.cname}} <span>{{item.cdate}}</span></h4><br/>
                        <p>{{item.ctext}}</p>
                    </div>
                </div>
            </li>
        </ul>
        <div class="chat" v-if="shows" @click="dianji()">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'Information',
        data(){
            return{
                list:'',
                shows:false,
                timeOutEvent:0
            }
        },
        methods: {
            tap(i){
                this.$router.push('/thechatpage')
            },
            dianji(){
                this.shows =! this.shows
            },
            gotouchstart(){
            let that = this;
            clearTimeout(that.timeOutEvent);
            that.timeOutEvent = 0;
            that.timeOutEvent = setTimeout(function(){
               that.shows =! that.shows
               
                },600);
            },
            gotouchend(){
                let that = this;
                clearTimeout(that.timeOutEvent);
                if(that.timeOutEvent!=0){
                     that.shows = true
                }
            },
            gotouchmove(){
                let that = this;
                clearTimeout(that.timeOutEvent);
                that.timeOutEvent = 0;
            }
        
        },
        mounted() {
            let that = this
            axios({
                url:'http://www.liaotian.com/api',
            }).then(function(data){
               that.list = data.data.data
            })
        },
    }
</script>

<style scoped>
    .van-icon{
        position: absolute;
       top: 15px;
        z-index: 9999;
    }
    .van-icon:nth-of-type(1){
         left: 18px;
        
    }
    .van-icon:nth-of-type(2){
         right: 18px;
        
    }
    .listul{
        padding: 46px 0;
        font-size: 14px;
        overflow: auto;
        width: 100%;
        height: 100%;
    }
    .listul li{
        border-bottom: 1px solid #d9d7d7;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
       padding: 20px 36px;
       box-sizing: border-box
    }
    .listul li .center{

        display: flex;
        justify-content: space-between;
        flex: 1;
        align-items: center;
         color: #a6a4a4
    }
    .center div{
        padding: 30px 0 30px 11px;
        flex: 1;
    }
    .center img{
        border-radius: 50%;
    }
    .center div h4{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: normal;
       
    }
     .center div h4 span{
         font-size: 10px;
     }
     .center div p{
         font-size: 12px;
     }
     .chat{
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background: rgba(255,255, 255, 0.1)
     }
</style>